<style>
    .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
        height: 34px;
        line-height: 34px;
        padding: 0 8px;
    }

    .pattern-div {
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
</style>
<body>
<input type="hidden" id="taskId" name="taskId" value="${taskId}">
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md10">
                <div class="layui-btn-group">
                    <button class="layui-btn" id="btn-back" layuimini-content-href="/task/showAllTasks">返 回</button>
                </div>
            </div>
            <div class="layui-col-md2">
                <div class="layui-btn-group">
                    <button class="layui-btn" id="btn-add-first">新增一级页面</button>
                    <button class="layui-btn layui-btn-normal" id="btn-test">测试采集</button>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <table id="pagerules-table" class="layui-table" lay-filter="pagerules-table"></table>
            </div>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="operation-state1">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">新增</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="operation-state2">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var miniPage = layui.miniPage;

        // 渲染表格
        renderTable();

        $('#btn-expand').click(function () {
            treetable.expandAll('#pagerules-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#pagerules-table');
        });

        $('#btn-add-first').click(function () {
            var href = 'pageRule/showPageruleAdd?taskId=' + $('#taskId').val() + '&parentPageRuleId=-1';
            return handlePageRule(href);
        });

        //监听工具条
        table.on('tool(pagerules-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm('确认删除吗？', function (index) {
                    var requestData = {
                        pageRuleId:data.id
                    }
                    $.ajax({
                        url: '/pageRule/deletePageRule',
                        type: 'post',
                        data: requestData,
                        success: function (data) {
                            if (data.code == 100) {
                                obj.del();
                                layer.close(index);
                            } else {
                                return layer.msg('Code:' + data.code + '，' + data.msg + '，请稍后再试！');
                            }
                        },
                        error: function (xhr, textstatus, thrown) {
                            return layer.msg('Status:' + xhr.status + '，' + xhr.statusText + '，请稍后再试！');
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                return handlePageRule('pageRule/showPageruleEdit?taskId=' + $('#taskId').val() + '&pageRuleId=' + data.id, 2);
            } else if (layEvent === 'add') {
                return handlePageRule('pageRule/showPageruleAdd?taskId=' + $('#taskId').val() + '&parentPageRuleId=' + data.id, 1);
            }
        });

        // $(".pattern-div").hover(function (){
        //     layer.tips('请点击此处配置', '#tips', {
        //         tips: [3, '#0FA6D8'], //设置tips方向和颜色 类型：Number/Array，默认：2 tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
        //         tipsMore: false, //是否允许多个tips 类型：Boolean，默认：false 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
        //         time:2000//2秒后销毁，还有其他的基础参数可以设置。。。。这里就不添加了
        //     });
        // })
        function renderTable() {
            layer.load(2);
            treetable.render({
                treeColIndex: 0,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'parentId',
                elem: '#pagerules-table',
                url: 'pageRule/data/listAllPageRules?taskId=' + $("#taskId").val(),
                page: false,
                cols: [[
                    {field: 'ruleName', width: '20%', title: '页面名称'},
                    {
                        field: 'pageType', templet: function (d) {
                            if (d.pageType == 1) {
                                return '列表页';
                            } else if (d.pageType == 2) {
                                if(d.isFieldRule == 1){
                                    return '字段';
                                }
                                return '详情页';
                            } else {
                                return '';
                            }
                        }, width: '10%', title: '页面类型'
                    },
                    {
                        field: 'pageContentType', templet: function (d) {
                            if (d.pageContentType == 1) {
                                return '<span class="layui-badge layui-bg-gray">html</span>';
                            } else if (d.pageContentType == 2) {
                                return '<span class="layui-badge layui-bg-gray">json</span>';
                            } else if (d.pageContentType == 3) {
                                return '<span class="layui-badge layui-bg-gray">xml</span>';
                            } else {
                                return '';
                            }
                        }, width: '10%', title: '内容类型'
                    },
                    {
                        field: 'parseType', width: '10%', title: '解析类型', templet: function (d) {
                            if (d.parseType == 1) {
                                return "xpath";
                            }
                        }
                    },
                    {
                        field: 'parseRule',
                        title: '匹配规则(<font color="red">点击表格配置</font>)',
                        width: '30%',
                        templet: function (d) {
                            var href = '/extractor/xpath?pageType=' + d.pageType + '&taskId=' + d.taskId + '&pageRuleId=' + d.id;
                            if (d.isFieldRule == 1) {
                                href = '/extractor/xpath?pageType=' + d.pageType + '&taskId=' + d.taskId + '&pageRuleId=' + d.parentId;
                            }
                            if ((!d.parseRule || d.parseRule == '')) {
                                if(d.pageType != 2) {
                                    return '<div class="pattern-div" href="' + href + '"><font color="red">点击配置当前页面规则</font></div>';
                                }else{
                                    if(d.fieldRuleCount == 0) {
                                        return '<div class="pattern-div" href="' + href + '"><font color="red">点击配置当前页字段规则</font></div>';
                                    }else{
                                        return '<div class="pattern-div" href="' + href + '">点击重新配置当前页字段规则</div>';
                                    }
                                }
                            }
                            return '<div class="pattern-div" href="' + href + '">' + (d.parseRule == null ? "" : d.parseRule) + '</div>';
                        }
                    },
                    {
                        templet: function (d) {
                            if (d.isFieldRule != 1) {
                                if (d.pageType == 1) {
                                    return $('#operation-state1').html();
                                } else if (d.pageType == 2) {
                                    return $('#operation-state2').html();
                                }
                            } else {
                                return '';
                            }
                        }, width: '20%', title: '操作'
                    }
                ]],
                done: function () {
                    $('.pattern-div').click(function () {
                        // var href = $(this).attr("href");
                        // var time = Date.now();
                        // var content = miniPage.getHrefContent(href+"&"+time);
                        //
                        // var index = layer.open({
                        //     type: 1,
                        //     shade: 0.2,
                        //     maxmin: false,
                        //     shadeClose: false,
                        //     area: [800 + 'px', 450 + 'px'],
                        //     content: content,
                        //     success: function (layero) {
                        //         layero.find('.layui-layer-title').remove();
                        //     },
                        //     cancel: function (layero) {
                        //         if (confirm('尚未保存，修改的信息将丢失，是否直接关闭？')) {
                        //             layer.close(index)
                        //             layer.closeAll("loading");
                        //         }
                        //         return false;
                        //     }, end: function () {
                        //         window.location.reload();
                        //     }
                        // });
                        // layer.full(index);
                        // $(window).on("resize", function () {
                        //     layer.full(index);
                        // });
                        // return false;
                        var href = $(this).attr("href");
                        window.open(href, "_blank");
                    });
                    layer.closeAll('loading');
                }
            });
        }

        function handlePageRule(href, action) {
            var content = miniPage.getHrefContent(href);

            var title = "新增页面规则";
            if (action == 3) {
                // 执行删除操作
            } else {
                if (action == 2) {
                    title = "编辑页面规则";
                }
                var index = layer.open({
                    title: title,
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: [1050 + 'px', 550 + 'px'],
                    content: content,
                    end: function () {
                        renderTable();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        }
    });

</script>
</body>
</html>